<template>
	<view class="content">
		<view class="u-page z-flex z-flex-align-c z-flex-justify-c pt100" style="flex-direction: column;">
			
			<image :src="avatar" mode="" style="width: 140rpx;height: 140rpx;border-radius: 50%;"></image>
			
			<button class="mt30 mb10" type="default" size="mini" plain="" open-type="chooseAvatar" @chooseavatar="chooseAvatar">获取头像</button>

			<u-input class="mt10" v-model="nickname" type="nickname" placeholder="请输入昵称" />
			
			<!-- <u-input class="mt10" v-model="invitation" placeholder="邀请码(选填)" /> -->
			
			<view class="mt60 fwb c-666 fs24">
				登录以后小程序将获得以下权限
			</view>
			<view class="c-999 fs24 mt10" @click="handSubmit">
				获取你的公开信息 (手机号) 用于注册登录
			</view>
<!-- 			<view class="z-flex mt20 z-flex-align-c">
				<u-checkbox shape="circle" v-model="checked" size="26" active-color="#23bbb3">
					
				</u-checkbox>
				<view style="margin-left: -20rpx;" class="fs24">
					<text class="c-999">我已阅读并同意</text>
					<text class="c-theme" @click="handXy">《 聚梦成客连连隐私权政策 》</text>
				</view>
			</view> -->
			<view class="mt80 z-flex" style="flex-direction: column;">
				<!-- <u-button v-if="!checked" @click="handTips" plain size="medium" shape="circle" :custom-style="customStyle">授权登录</u-button> -->
				<u-button :disabled="(nickname === '' || !isAvatar)" plain size="medium" open-type="getPhoneNumber" shape="circle"
					:custom-style="customStyle" @getphonenumber="getPhoneNumber">授权登录</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		loginApi,
		getPhoneApi,
		getOpenIdApi
	} from './api/index.js'
	import { getOssApi } from '@/api/user.js'
	import config from '@/libs/config.js'
	export default {
		data() {
			return {
				loading: true,
				customStyle: {
					width: '500rpx',
				},
				avatar: '../../static/images/logo.png',
				isAvatar: false,
				nickname: '',
				invitation: '',
				// checked: false
			}
		},
		onLoad() {

		},
		onShow() {

		},
		methods: {
			handSubmit(){
				uni.showToast({
					title: this.nickname
				})
			},
			async chooseAvatar(e){
				const ossConfig = await getOssApi({dir: config.ossDir})
				const {policy,accessid,signature} = ossConfig.data
				let filePath = e.detail.avatarUrl
				
				let fileType = filePath.substring(filePath.lastIndexOf('.')) || '.jpg'
				let timeStamp = new Date().getTime()
				let key = `${config.ossDir}/${timeStamp}${fileType}` 
				const formData = {
					key,
					policy,
					OSSAccessKeyId: accessid,
					success_action_status: '200',
					signature
				}
				uni.uploadFile({
					url: config.ossUrl,
					filePath,
					formData,
					name: 'file',
					success: async () => {
						let path = `${config.ossUrl}/${key}`
						this.avatar = path
						this.isAvatar = true
					},
					fail() {
						uni.showToast({
							title: '头像上传失败,请重试',
							icon: 'none'
						})
					}
				});
			},
			async getPhoneNumber(e) {
				try {
					this.loading = true
					uni.showLoading({
						title: '请稍后...'
					})
					const {
						data,
						code
					} = await getPhoneApi({
						code: e.detail.code
					})
					uni.hideLoading()
					if (code != 0) return this.loading = false
					this.phone = data.phone
					this.Login()
				} catch (e) {
					this.loading = false
				}

			},
			Login() {
				uni.login({
					provider: 'weixin',
					success: async (loginRes) => {
						try {
							// 这里是用于获取openid后续用于支付等重要信息
							const openData = await getOpenIdApi({
								code: loginRes.code
							})
							const openId = openData.data.openId
							if (openData.code != 0) return
							const {
								code,
								data,
								msg
							} = await loginApi({
								openId,
								phone: this.phone,
								cover: this.avatar,
								name: this.nickname
							})
							if (code != 0) return
							uni.showToast({
								title: '登陆成功',
								icon: 'none'
							})
							uni.setStorageSync('openid', openId)
							uni.setStorageSync('phone', data.phone)
							uni.setStorageSync('userId', data.id)
							uni.navigateBack()
						} catch (e) {
							this.loading = false
						}
						this.loading = false
					},
					fail: () => {
						uni.showToast({
							title: '登录失败',
							icon: 'none'
						})
						this.loading = false
					}
				});
			},
			// handXy(){
				
			// },
			// handTips(){
			// 	if(!this.checked){
			// 		uni.showToast({
			// 			title: '请先阅读并同意相关协议',
			// 			icon: 'none'
			// 		})
			// 	}
			// },
		}
	}
</script>

<style scoped lang="scss">

</style>